const instance = axios.create({
    baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
    method:'get'
  });

  const left=document.querySelector('.left ul')
  instance({
    url:'/category/list'
  }).then(({data:res}) => {
    
    
    let str=''   
    res.data.list.forEach(element => {
        str+=`
        <li data-index=${element.category_id}>${element.name}</li>
        `
    }); 
    left.innerHTML=str
    render(res.data.list[0])
    let ls=document.querySelectorAll('.left li')
    ls[0].classList.add('active')
    ls.forEach(function(item){
        item.onclick=function(){
            let obj=res.data.list.find(el=>{
                return this.dataset.index==el.category_id
            })
            render(obj)
            for(let i=0;i<ls.length;i++){
                ls[i].classList.remove('active')
            }
           this.classList.add('active')
        }
    })
  })
const right=document.querySelector('.right')
function render(ob){
    let {children}=ob
    let str=''
    if(children==undefined){
        str=''
    }else{
        children.forEach(item=>{
            str+=`
            <div>
            <img src=${item.image.external_url} alt="">
            <p>${item.name}</p>
            </div>
            `
        })
    }
    right.innerHTML=str
}
